<template>
  <div
    class="widget-topbar relative flex align-start justify-between color-white no-select full-width"
  >
    <div class="widget-topbar-left">
      <div
        class="widget-topbar-left-button title-3 pointer retive  relative hover-color-active  text-color"
        @click="clickMenu(item)"
        v-for="item in menuItems.filter(i => i.center == 'left')"
        :key="item.path"
        :class="{ active: $route.path === item.path }"
        v-show="item.show"
      >
        <span v-show="item.icon" :class="item.icon" />{{ item.title }}
        <span
          v-if="item.num"
          class="absolute pointer-num color-white flex align-center justify-center"
          >{{ item.num }}</span
        >
      </div>

      <!-- <WidgetToggleMenu
        :menuItems="menuItems"
        @clickMenu="clickMenu"
        position="LT"
      /> -->
    </div>
    <div
      class="widget-topbar-center absolute center-horizontal title-1 text-center text-shadow"
    >
      {{ title }}
    </div>
    <div class="widget-topbar-right1 absolute">
      <div
        class="widget-topbar-right-button title-3 pointer retive color-info relative hover-color-active text-color "
        @click="clickMenu(item)"
        v-for="item in menuItems.filter(i => i.center == 'right')"
        :key="item.path"
        :class="{ active: $route.path === item.path }"
        v-show="item.show"
      >
        <span v-show="item.icon" :class="item.icon" />{{ item.title }}
        <span
          v-if="item.num"
          class="absolute pointer-num color-white flex align-center justify-center"
          >{{ item.num }}</span
        >
      </div>

      <!-- <WidgetToggleMenu
        :menuItems="menuItems"
        @clickMenu="clickMenu"
        position="LT"
      /> -->
    </div>
    <div class="widget-topbar-right flex align-center">
      <div
        class="widget-topbar-right-button flex align-center pointer"
        v-for="{ icon, title, action } in rightBtns"
        :key="title"
        @click="action"
      >
        <el-button circle :icon="icon" class="button-icon black-bg" /><span
          class="button-text nowrap title-2 big-number text-color"
          >{{ title }}</span
        >
      </div>
    </div>
    <el-dialog
      title="智能运维"
      :visible.sync="yunweiShow"
      :modal="true"
      :fullscreen="true"
      v-if="yunweiShow"
      append-to-body
      :close-on-click-modal="false"
      custom-class="widget-dialog absolute center no-margin color-white black-bg full-height"
    >
      <div class="full-width full-height">
        <iframe
          class="full-width  full-height"
          :src="ciUrl"
          frameborder="0"
          id="iframeOsp"
          :key="key"
        ></iframe>
      </div>
      <!-- <template slot="footer">
        <el-button class="button-cancel" @click="yunweiShow = false"
          >返回</el-button
        >
      </template> -->
    </el-dialog>
  </div>
</template>

<script>
import { title } from "@/configurations";
import { urls } from "@/api/mock";
import { mapGetters, mapState } from "vuex";
import * as routes from "@/router/views";
import WidgetToggleMenu from "@/components/Widget/WidgetToggleMenu/index";
import { hasRoute } from "@/utils/haveRouter";
import { translateTreeToData1 } from "@/utils/parentSon";
export default {
  name: "WidgetTopbar",
  components: { WidgetToggleMenu },
  data() {
    const that = this;
    return {
      title,
      url: "",
      yunweiShow: false,
      menuItems: [],
      srcUrl: "https://172.18.1.205:8443/osp/index.html#/login-old",
      ciUrl: "",
      key: new Date().getTime(),
      rightBtns: [
        // {
        //   icon: "el-icon-setting",
        //   title: "系统管理",
        //   action: () => {
        //     window.open(this.url);
        //   },
        // },
        // {
        //   icon: "el-icon-refresh",
        //   title: "刷新",
        //   action: () => {
        //     window.location.reload();
        //   },
        // },
        {
          icon: "el-icon-switch-button",
          title: "登出",
          action: () => {
            that.$store.dispatch("logout");
          }
        }
      ]
    };
  },
  created() {
    urls().then(({ data }) => {
      this.url = data.adminUrl;
    });
    this.initMenu();
  },
  watch: {
    $route(to, from) {
      this.initMenu();
    }
  },
  computed: {
    ...mapGetters(["sidebarMap"]),
    ...mapState(["user"]),
    roleNow() {
      return this.user.role;
    },
    isWorkbench() {
      return this.roleNow?.roleName == "业务经办人";
    },
    routes() {
      return this.$router.options.routes;
    },
    siderCenterItem() {
      return Object.values(routes)
        .filter(route => route?.meta?.show && route?.meta.center == "center")
        .map(route => {
          return {
            icon: route.meta.icon,
            title: route.meta.title,
            path: route.path
          };
        })
        .reverse();
    },
    sidebarItem() {
      return Object.values(routes)
        .filter(route => route?.meta?.show && route?.meta.center == "center")
        .map(route => {
          return {
            icon: route.meta.icon,
            title: route.meta.title,
            path: route.path
          };
        })
        .reverse();
    }
  },
  methods: {
    initMenu() {
      let that = this;
      this.menuItems = [
        {
          name: "menu2",
          title: "服务台",
          icon: "",
          show: true,
          center: "left",
          path: "",
          action: () => {
            //跳转服务台地址
            window.open("https://gzbbn.cn-elite.com:1443/");
          }
        },
        {
          name: "menu2",
          title: "运维管理",
          icon: "",
          show: true,
          center: "left",
          path: "",
          action: () => {
            //查找管理端的地址
            let adminList = this.routes
              .filter((e, index, ev) => {
                return e.children;
              })
              .filter(v => {
                return v.children.find(ev => Number(ev.isAdmin));
              });

            let listWorkbench = this.routes.filter(
              i => i.name == "Workbench" && i?.children?.length > 1
            );
            let list = this.routes.filter(
              i => i.name == "Property" && i?.children?.length > 1
            );
            if (listWorkbench?.length && this.isWorkbench) {
              //跳转工作台
              let routeUrl = that.$router.resolve({
                path: listWorkbench[0]?.children[0]?.path,
                query: {
                  companyName: listWorkbench[0]?.children[0]?.name
                }
              });
              window.open(routeUrl.href, "_blank");
              return;
            }
            if (list?.length) {
              let routeUrl = that.$router.resolve({
                path: "/Property/list",
                query: {
                  companyName: "PropertyList"
                }
              });
              window.open(routeUrl.href, "_blank");
            } else if (adminList.length) {
              let routeUrl = that.$router.resolve({
                path: adminList[0].children[0].path,
                query: {
                  companyName: adminList[0].children[0].name
                }
              });
              window.open(routeUrl.href, "_blank");
            }
          }
        },
        {
          name: "menu2",
          title: "应急预警",
          icon: "",
          show: true,
          center: "left",
          num: 0,
          path: "",
          action: () => {
            //服务台地址
            // window.open(this.url);
            this.$emit("yujing", "yujing");
          }
        },

        {
          name: "menu2",
          title: "网络拓扑",
          icon: "",
          show: true,
          center: "right",
          path: "",
          action: () => {
            that.$router.push("/Dashboard/Psychz");
            let routeUrl = that.$router.resolve({
              path: "/Dashboard/psychz",
              query: {
                name: "psychz"
              }
            });
          }
        },
        {
          name: "menu2",
          title: "智能运维",
          icon: "",
          show: true,
          center: "right",
          path: "",
          action: () => {
            that.ciUrl = that.srcUrl;
            // that.yunweiShow = true;
            // setInterval(() => {
            //   that.key = new Date().getTime();
            //   that.ciUrl = that.srcUrl;
            //   //   this.srcUrl = this.document.getElementById("iframeOsp").src = "";
            //   document
            //     .getElementById("iframeOsp")
            //     .contentWindow.location.reload(true);
            // }, 3000);
            //跳转服务台地址
            window.open("https://172.18.1.205:8443/osp/index.html#/login-old");
          }
        },
        {
          name: "menu2",
          title: "报表管理",
          icon: "",
          show: this.routes.filter(
            i => i.name == "Statement" && i.children.length
          ).length
            ? true
            : false,
          center: "right",
          path: "",
          action: () => {
            let routeUrl = that.$router.resolve({
              path: "/Statement/AcdList"
            });
            window.open(routeUrl.href, "_blank");
          }
        }
      ];
    },
    initData(data) {
      return JSON.parse(JSON.stringify(data));
    },
    clickMenu(item, index) {
      console.log(item);
      item.action();
      //   this.$router.push(item.path);
      //   console.log(item);
      //   console.log(index);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/styles/backgrounds.scss";
.widget-topbar {
  & > div {
    flex-shrink: 0;
  }
  .widget-topbar-center {
    background-image: url("/fabu-admin/uiImgs/top.png");
    background-size: 100% 100%;
    padding: 16px 24px;
    min-width: 300px;
    margin-top: 5px;
    font-weight: bold;
  }
  .widget-topbar-left {
    padding: 6px 200px;
    right: 0;
    .widget-topbar-left-button {
      display: inline-block;
      padding: 6px 8px;
      margin-right: 15px;
    }
  }
  .widget-topbar-right1 {
    left: calc(50% + 480px);
    padding: 6px 0;
    .widget-topbar-right-button {
      display: inline-block;
      padding: 6px 8px;
      margin-right: 15px;
    }
  }
  .pointer-num {
    background: red;
    width: 25px;
    border-radius: 50%;
    height: 25px;
    top: -5px;
    right: -15px;
  }
  .widget-topbar-right {
    padding: 35px;
    padding-top: 24px;
    .widget-topbar-right-button {
      margin-right: 10px;
      &:hover {
        .button-text {
          max-width: 100px;
          transition-delay: 0s;
          opacity: 1;
        }
        .button-icon {
          background-color: $active;
        }
      }
      .button-icon {
        font-size: 22px;
        margin-right: 4px;
        padding: 4px;
        color: white;
        transition: background-color 0.25s;
        border: 0px;
      }
      .button-text {
        max-width: 0px;
        transition: all 0.25s;
        opacity: 0;
        transition-delay: 1s;
        overflow: hidden;
      }
    }
  }
}
</style>
